<template>
  <div id="ContactUs">
    <div class="banner container-fluid text-center"></div>
    <div class="container ContactUs-container">
      <div v-for="(member, index) in teamMembers" :key="index" class="box">
        <div class="card">
          <div class="photo">
            <img :src="member.image" alt="" />
          </div>
          <h1>{{ member.name }}</h1>
          <h2>{{ member.position }}</h2>
          <p>{{ member.description }}</p>
          <a :href="member.qq">{{ member.qq }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import WOW from 'wow.js';
import { onMounted } from 'vue';

const teamMembers = [
  {
    image: './src/assets/img/dty.jpg',
    name: '丁天逸',
    position: '项目经理',
    description: '负责整体规划、进度管理和团队协调',
    qq: 'QQ: 674661160',
  },
  {
    image: './src/assets/img/tb.jpg',
    name: '谭斌',
    position: '技术开发组',
    description: '负责前后端开发与DTBIM引擎的集成，确保数据交互流畅',
    qq: 'QQ: 3021841753',
  },
  {
    image: './src/assets/img/zlr.png',
    name: '周梁然',
    position: '技术开发组',
    description: '主攻前端开发，负责Web界面设计与实现',
    qq: 'QQ: 2212096467',
  },
  {
    image: './src/assets/img/zyh.jpg',
    name: '曾宇航',
    position: '报告撰写与宣传组',
    description: '负责成果总结及开发报告撰写',
    qq: 'QQ: 1344310470',
  },
  {
    image: './src/assets/img/zcy.jpg',
    name: '张晨阳',
    position: '资料收集和处理组',
    description: '负责历史建筑信息的搜集、整理与录入工作',
    qq: 'QQ: 1097191270',
  },
];

onMounted(() => {
  new WOW().init();
});
</script>

<style scoped>
/* ... All your CSS styles go here ... */
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url('../assets/img/banner_1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.ContactUs-container {
  padding: 80px 0;
  transition: all ease 0.5s;
  box-sizing: border-box;
}

.container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.container .box{
    /* 相对定位 */
    position: relative;
    width: 240px;
    height: 400px;
    margin: 30px;
    display: flex;
    transition: .5s;
    flex-shrink: 0;
    /*-webkit-box-reflect: below 1px linear-gradient(transparent,#0b0c0bea);//添加渐变倒影*/
}

.container .box img{
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
}

/*给鼠标未选中的图片添加效果*/
.container:hover > :not(:hover){
    margin: 0 -20px;
    filter: drop-shadow(0 0 25px #000)
            drop-shadow(0 0 25px #000);
    transform: perspective(500px)rotateY(45deg)scale(0.9);
}

.container .box:hover ~ .box{
    transform: perspective(500px)rotateY(-45deg)scale(0.9);
}

.container .box:hover{
    transform: perspective(500px)rotateY(0)scale(1.25);
}
.card{
    /* 相对定位 */
    position: relative;
    width: 280px;
    height: 420px;
    margin: 20px;
    background-color: #758a99;
    border-radius: 20px;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 弹性布局 */
    display: flex;
    /* 元素纵向排列 */
    flex-direction: column;
    /* 居中 */
    align-items: center;
    color: #fff;
    /* 阴影 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    /* 不让其他被挤压 */
    flex-shrink: 0;
}
.card .photo img{
    width: 100%;
    height: 100%;
    /* 保持原有尺寸比例,裁切长边 */
    object-fit: cover;
}
/* 默认大图 */
.card .photo{
    /* 绝对定位 */
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0%;
    overflow: hidden;
    /* 动画过渡 */
    transition: 0.5s;   
}
/* 鼠标移入变小图 */
.card:hover .photo{
    top: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
/* 这里加个黑色到透明的渐变背景，可以更好的看清楚名字 */
.card .photo::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;   
    background: linear-gradient(to bottom,transparent 50%,#222);
}
.card h1{
    position: absolute;
    top: 300px;
    transition: 0.5s;
    font-weight: bold;
    color:  rgb(10, 2, 0);
}
.card:hover h1{
    top: 140px;
    color:rgb(11, 2, 1);
}
.card h2{
    margin-top: 220px;
    width: 80%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.card p {
    width: 90%;
    text-indent: 32px;
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 30px;
}
.card a{
    font-size: 14px;
    color: rgba(184, 48, 7, 0.8);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 8px 32px;
    border-radius: 8px;
}
.card a:hover{
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
}
</style>

